React Native学习笔记
1. react-native init AwesomeProject原因分析：react-native 0.55.6版本的问题，需要在init项目的时候指定老版本号，比如0.55.4解决方案：react-native init AwesomeProject -- version 0.55.42. react-native run-android Execution failed for task ‘:app:prepareSrolkReactNativeFilePickerUnspecifiedLibra...
2024-01-10
React Native_环境编译
官方环境搭建一、两种方式运行程序1、指令运行：react-native run-android。运行结果如下图通过指令运行结果二：直接通过android studio运行二、遇到的问题1、unable to load script.make sure you're either running a metro server。如下图所示。标题异常图像a：通过指令启动时没有启动metro server解决方法：1：运行 adb rev...
2024-01-10
React Native 架构一览
一.架构设计整体上分为三大块，Native、JavaScript 与 Bridge：Native 管理 UI 更新及交互，JavaScript 调用 Native 能力实现业务功能，Bridge 在二者之间传递消息。即：最上层提供类 React 支持，运行在JavaScriptCore提供的 JavaScript 运行时环境中，Bridge 层将 JavaScript 与 Native 世界连接起来。具体的，Shadow Tree 用来定...
2024-01-10
React Native-组件的引用
之前文章中，我们使用了许多React Native组件，也定义了一些组件。但是我们都没有定义组件的标识，我们都是通过回调方法处理组件对应的事件，这种情况能满足绝大多数需求，有些情况我们需要对组件进行操作，此时就需要获取组件的引用，进而通过该应用对组件进行操作。比如，我们可以通过引用...
2024-01-10
React-Native踩坑记录二
1.Image组件的borderRadius画圆有平台兼容性问题，在IOS下会失效解决方法有几种(1)在外面包裹一层View,对View组件使用borderRadius就可以了，这是我的做法(2)在同一级属性块下加上overflow: 'hidden'，我没试过，大家可以阅读下面的链接https://www.jianshu.com/p/d237f02584182.React-Native的渐变实现方案(1) 使用react-native-li...
2024-01-10
React Native遇到的问题(一)
在我们创建React Native项目的时候发现gradle 版本相对比较低的，而且很多情况下直接编译会报错。而网上的很多解决方案就是gradle version改为1.2.3,于是，我有一个疑问，现在的gradle verion都已经3.0.1了，为什么还不升级呢？但是我发现我直接修改后，更是报各种错。 首先看下图这是我在网上搜到的一与...
2024-01-10
React Native View组件实例
我们如何通过RN实现如图所示的效果：一：图形分析1.1：图形分为3列，我们设置flexDirection为“”row”，每个View独占1/3，flex设置为11.2：2,3列先把图形均分为上下两部分，填充内容1.3：给2,3列设置边框二：代码实现按照一的分析，实现逻辑如下：2.1：把布局分为3部分2.2：分别填充内容2.3：添加...
2024-01-10
React Native获取手机的各种高度
一、窗口高度即图中黄色+蓝色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('window').height; 二、屏幕高度即图中黄色+蓝色+红色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('screen').height; 三、内容高度即图中蓝色部分import { Style...
2024-01-10
React Native获取组件位置和大小
RN页面中定位或滚动操作时，需要获取元素的大小和位置信息，有几种常用的方法获取设备屏幕的宽高import {Dimensions} from 'react-native';var {height, width} = Dimensions.get('window');获取元素的大小和位置信息1. onLayout事件属性<View onLayout={this._onLayout}><View>_onLayout = (e) => { let {x,y,width,height} = e.nativeE...
2024-01-10
React Native开发之expo的使用
背景react native官方现在推荐的项目构建方式是create-react-native-app，即简称CRNA，并且建议使用expo这个APP来实时查看效果。使用CRNA构建项目后，命令行输入npm start，随即会为开发者创建一个开发服务器，并打印出大大的二维码，使用expo扫码，即可预览项目，不过真的这么丝滑吗，使用中还是遇到了一些...
2024-01-10
React Native之FlexBox布局
参考原文链接：https://www.cnblogs.com/wujy/p/5841685.html弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至...
2024-01-10
从零学React Native之03页面导航
之前我们介绍了RN相关的知识： 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机本篇主要介绍页面导航上一篇文章给大家介绍了简单界面的搭建, 这一篇我们需要两个界面, 一个是注册界面,一个是注册信息界面. 当然我们还需要一个组件去控制两个界面的切换.每...
2024-01-10
React Native悬浮按钮组件的示例代码
React Native悬浮按钮组件：react-native-action-button，纯JS组件，支持安卓和IOS双平台，支持设置子按钮，支持自定义位置和样式和图标。效果图安装方法npm i react-native-action-button --savereact-native link react-native-vector-icons因为用到了react-native-vector-icons图标组件，需要做下link。如果你项目中已经使用了react-na...
2024-01-10![[RN] <span style='color:red;'>React Native</span> 下拉放大动画](/wp-content/uploads/thumbs/534154_thumbnail.jpg)
[RN] React Native 下拉放大动画
React Native 下拉放大动画经测试，无法运行https://www.jianshu.com/p/1c960ad75020...
2024-01-10如何退出/关闭React Native应用程序？
如果我的ReactNative应用无法连接到其后端，我会显示一个带有OK按钮的Alert。如果发生这种情况，应用程序将无法继续运行，因此我想在单击按钮时将其关闭。我该怎么做呢？我怀疑密钥在AppRegistry中，但是文档有点匮乏。回答：今天没有反应本机的特定方法。您必须从事物的本机方面完成此任务。此...
2024-01-10
如何在React Native中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹，这是存放 node 模块的地方，Node.js 的包管理器npm 是全球最大的开源库生态系统。提到npm，一般指两层含义：一是 Node.js 开放式模块登记和管理系统，另一种是 Node.js默认的模块管理器，是一个命令行软件，用来安装和管理 node 模块。本文旨在探讨如...
2024-01-10
React Native安卓项目打包发布APK步骤
1、产生签名的key该过程会用到keytool，开发过安卓的都应该接触过该东西。详细请见密钥和证书管理工具。在项目的主目录（不是android文件夹）中执行：--生成签名key，注意记下你的密钥和存储密码，后面配置文件需要使用keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -val...
2024-01-10
React-Native 之 Modal介绍与使用
前言遗漏的常用组件，刚发现官方有提供，这边也来介绍一下。如本文有错或理解偏差欢迎联系我，会尽快改正更新！如有什么问题，也可直接通过邮箱 277511806@qq.com 联系我。本章涉及资源下载：链接: https://pan.baidu.com/s/1o84o6JS 密码: htx6属性animationType（动画类型） PropTypes.oneOf(['none', 'slide', '...
2024-01-10
使用TypeScript创建React Native
⒈初始化 React Native环境 参考https://reactnative.cn/docs/getting-started.html⒉安装React Native官方的脚手架工具npm install -g @react-native-community/cli⒊使用React Native脚手架初始化项目#默认是JavaScriptnpx react-native init ts_react_native#可以直接使用TypeScript初始化npx react-native init ts_r...
2024-01-10
React native源码解析（5000字）
环境准备:Node、Watchman、Xcode 和 CocoaPods & XCode ，稳定的代理工具(如果没有稳定的代理工具，基本上可以考虑放弃了)生成项目npx react-native init Appcd Appyarn cdcd iospod install (注意不要+sudo,此处必须全局开启代理,否则下载会失败)cd ..yarn ios 如果yarn ios后无法看到Simulator有APP,使用xCode找到这个项目...
2024-01-10
React DevTools
原文：https://reactjs.org/blog/2019/08/15/new-react-devtools.htmlWe are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!What’s changed?A lot has changed in version 4! At a high level, thi...
2024-01-10从React Native中的数组映射功能动态渲染内容
我试图从数组中获取数据，并使用map函数来呈现内容。看着**{this.lapsList()}**和相关的**lapsList()**来了解我要做什么。结果是什么都没有显示（视图下的视图等），这是我的简化代码：class StopWatch extends Component {constructor(props) { super(props); this.state = { laps: [] };}render() { return ( <View style={st...
2024-01-10
从零开始学习React Native，先重布局开始学起
React Native布局学习，模仿携程的首页内容，可以很好的让我们练习一下flexbox布局，最后完成的效果图如下：附上Github地址，欢迎star一、布局主要内容如下：1、搜索栏的布局2、图片轮播3、类似九宫格的布局4、图片、文字混合布局5、底部布局主要使用的控件StyleSheet Text PixelRatio ScrollView Image View TextI...
2024-01-10React-Native中props具体使用详解
props就是属性，是为了描述一个组件的特征而存在的。它是父组件传递给子组件的。使用props通过上一个页面传递新建一个 PropsTest.js 文件exprot default class PropsTestextendesComponent{ render(){ return <Text>{this.props.name}</Text> }}在上一个页面中使用PropsTest组件import PropsTest from './PropsTest'<PropsTest name = '...
2024-01-10
React Native环境配置之Windows版本搭建
接近年底了，回想这一年都做了啥，学习了啥，然后突然发现，这一年买了不少书，看是看了，就没有完整看完的。悲催。然后，最近项目也不是很紧了，所以抽空学习了H5。自学啃书还是很无趣的，虽然Head First Html5 Programming（中文版）这本书讲的很有意思，但是学习了大半本就想自己动手练练，所以...
2024-01-10
